<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<form name="myForm">
	<input type="text" name="a">+
	<input type="text" name="b">
	<button>get</button>
	<button>post</button>
	<input type="text" name="sum">
</form>

</body>
<script>
	// ajax:xhr fetch发送的请求可以称为ajax请求。
	// ajax请求与一般请求的区别：ajax请求获取到的信息可以由程序员来控制，而一般请求是由浏览器来控制的。
	const btns = document.querySelectorAll("button");
	btns[0].onclick = function(e){
		let a = document.myForm.a.value.trim();
		let b = document.myForm.b.value.trim();
		// 请求方式：get
		// 请求地址：http://zhangpeiyue.com/info
		// 发送参数：
		// a
		// b
		// 响应结果：
		// http://zhangpeiyue.com
		// http://zhangpeiyue.com
		// 1- 生成xhr实例
		const xhr = new XMLHttpRequest();
		xhr.responseType = "json";// 指定响应体的数据格式为JSON数据
		// 2- 准备:第一个参数是请求方式，第二个参数是请求地址
		// ?a=1&b=2
		// 直接将值写在地址中
		xhr.open("get",`http://zhangpeiyue.com/info/${a}/${b}`);
		// 3- 发送
		xhr.send();
		// 4- 获取结果
		xhr.onload = function(){
			// 当获取到响应信息后会执行该函数
			// console.log(xhr.getAllResponseHeaders());// 获取到所有响应头
			// console.log(xhr.getResponseHeader("content-length"));// 获取指定响应头信息
			// console.log(xhr.status);// 状态码
			// console.log(xhr.statusText);// 状态码说明
			// console.log(xhr.response);// 响应体信息
			
			document.myForm.sum.value = xhr.response.sum;
			
			// axios：是一个ajax请求库，库的核心：Promise+xhr
			// ajax：通过xhr,fetch发送的请求是ajax请求。
			// xhr:是通过XMLHttpRequest生成的一个实例对象，可以通过该对象发送ajax请求
		}
		e.preventDefault();
	};
	btns[1].onclick = function(e){
		// post http://zhangpeiyue.com/info
		e.preventDefault();
	}
</script>
</html>